<script lang="ts" setup>
import {ref} from "vue";
import {queryURLParams, valueOrDefault} from "jsmethod-extra";

const roleRecords: Record<string, string> = Array.from({length: 10}).reduce((memo: Record<string, string>, _, index) => {
  memo[index + ""] = `管理员0${index + 1}`
  return memo;
}, {} as Record<string, string>);

// 解析到 href 对象
const hrefObject = queryURLParams(window.location.href) as {
  roleId: string,
  tk: string
};
const tkAndChannelIdMapping = new Map<string, string>();

// 表示可以连接的 socket
let connectSocket: WebSocket | null = null;

const webSocket = new WebSocket("ws://localhost:7397/websocket");
/**
 * web socket 监听到 socket open 事件
 *
 * @author lihh
 */
webSocket.onopen = function () {
  connectSocket = webSocket;
  // 第一次进行访问
  firstConnectHandler();
}

/**
 * web socket 监听消息
 *
 * @author lihh
 * @param event 监听的事件
 */
webSocket.onmessage = function (event) {
  processMessageHandler(JSON.parse(event.data))
}

const columns = [
  {
    title: "索引",
    name: "_index",
    dataIndex: "_index",
    key: "_index"
  },
  {
    title: "tk",
    name: 'tk',
    dataIndex: 'tk',
    key: 'tk',
  },
  {
    title: "角色",
    name: 'role',
    dataIndex: 'role',
    key: 'role',
  },
  {
    title: "消息",
    name: 'msg',
    dataIndex: 'msg',
    key: 'msg',
  },
]

const data = ref<{ msg: string, role: string, tk: string }[]>([])

/**
 * 表示 第一次 连接
 *
 * @author lihh
 */
function firstConnectHandler() {
  connectSocket!.send(JSON.stringify({
    state: "CLIENT_CONNECT",
    ...generatorBasePushMessageHandler()
  }))
}

/**
 * 处理登录事件
 *
 * @author lihh
 */
function processLoginHandler() {
  connectSocket!.send(JSON.stringify({
    state: "CLIENT_LOGIN",
    ...generatorBasePushMessageHandler()
  }))
}

/**
 * 处理 退出登录事件
 *
 * @author lihh
 */
function processLogoutHandler() {
  connectSocket!.send(JSON.stringify({
    state: "CLIENT_LOGOUT",
    ...generatorBasePushMessageHandler()
  }))
}

/**
 * 生成 基础push 消息内容
 *
 * @author lihh
 */
function generatorBasePushMessageHandler() {
  return {
    tk: hrefObject.tk,
    roleId: hrefObject.roleId,
    channelId: valueOrDefault(tkAndChannelIdMapping.get(hrefObject.tk), null)
  }
}

/**
 * 处理消息
 *
 * @author lihh
 * @param params 传递的数据
 */
function processMessageHandler(params: {
  state: number,
  tk: string,
  channelId: string,
  roleId: string,
  msg: string
}) {
  switch (String(params.state)) {
      // 执行到此处的时候，说明连接成功了
    case "CLIENT_CONNECT":
      tkAndChannelIdMapping.set(params.tk, params.channelId);
      break;
  }
  data.value.push({
    msg: params.msg!,
    role: params.roleId,
    tk: params.tk
  })
}
</script>

<template>
  <div class="home">
    <a-table :pagination="false" :columns="columns" :data-source="data">
      <template #bodyCell="{ column, text, index }">
        <template v-if="column.dataIndex === '_index'">
          <span>{{ index + 1 }}</span>
        </template>
        <template v-if="column.dataIndex === 'role'">
          <span>{{ roleRecords[text] }}</span>
        </template>
      </template>
    </a-table>
    <div class="btns">
      <a-button type="primary" @click="processLoginHandler">登录</a-button>
      <a-button type="primary" @click="processLogoutHandler">退出登录</a-button>
    </div>
  </div>
</template>

<style lang="less" scoped>
.btns {
  display: flex;
  justify-content: space-evenly;
  margin-top: 100px;
}
</style>